<template>
    <div class="example-container">
        <h2>权限控制示例</h2>

        <div class="permission-section">
            <h3>用户管理权限</h3>
            <div class="button-group">
                <el-button type="primary" v-permission="'user:add'">添加用户</el-button>
                <el-button type="warning" v-permission="'user:edit'">编辑用户</el-button>
                <el-button type="danger" v-permission="'user:delete'">删除用户</el-button>
                <el-button type="info" v-permission="'user:view'">查看用户</el-button>
            </div>
        </div>

        <div class="permission-section">
            <h3>角色管理权限</h3>
            <div class="button-group">
                <el-button type="primary" v-permission="'role:add'">添加角色</el-button>
                <el-button type="warning" v-permission="'role:edit'">编辑角色</el-button>
                <el-button type="danger" v-permission="'role:delete'">删除角色</el-button>
                <el-button type="info" v-permission="'role:view'">查看角色</el-button>
            </div>
        </div>

        <div class="permission-section">
            <h3>部门管理权限</h3>
            <div class="button-group">
                <el-button type="primary" v-permission="'department:add'">添加部门</el-button>
                <el-button type="warning" v-permission="'department:edit'">编辑部门</el-button>
                <el-button type="danger" v-permission="'department:delete'">删除部门</el-button>
                <el-button type="info" v-permission="'department:view'">查看部门</el-button>
            </div>
        </div>

        <div class="permission-section">
            <h3>会议室管理权限</h3>
            <div class="button-group">
                <el-button type="primary" v-permission="'room:add'">添加会议室</el-button>
                <el-button type="warning" v-permission="'room:edit'">编辑会议室</el-button>
                <el-button type="danger" v-permission="'room:delete'">删除会议室</el-button>
                <el-button type="info" v-permission="'room:view'">查看会议室</el-button>
            </div>
        </div>

        <div class="permission-section">
            <h3>会议预约权限</h3>
            <div class="button-group">
                <el-button type="primary" v-permission="'meeting:add'">预约会议</el-button>
                <el-button type="warning" v-permission="'meeting:edit'">修改预约</el-button>
                <el-button type="danger" v-permission="'meeting:delete'">取消预约</el-button>
                <el-button type="info" v-permission="'meeting:view'">查看预约</el-button>
            </div>
        </div>

        <div class="permission-section">
            <h3>会议审批权限</h3>
            <div class="button-group">
                <el-button type="success" v-permission="'meeting:approve'">审批会议</el-button>
                <el-button type="info" v-permission="'meeting:view'">查看审批</el-button>
            </div>
        </div>

        <h2>动态菜单示例</h2>
        <el-menu class="sidebar-menu" :router="true">
            <!-- 动态渲染菜单项 -->
            <template v-for="route in permissionRoutes" :key="route.path">
                <el-menu-item v-if="!route.meta?.hidden" :index="route.path">
                    <el-icon v-if="route.meta && route.meta.icon">
                        <component :is="route.meta.icon" />
                    </el-icon>
                    <span>{{ route.meta?.title }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { useStore } from '@/stores/userInfo'

// 声明路由元信息类型
declare module 'vue-router' {
    interface RouteMeta {
        title?: string;
        icon?: string;
        hidden?: boolean;
        alwaysShow?: boolean;
        roles?: (number | string)[];
        permissions?: string[];
    }
}

const router = useRouter()
const userStore = useStore()
const routes = router.options.routes

// 根据用户权限过滤路由
const permissionRoutes = computed(() => {
    // 获取/index路径下的子路由
    const mainRoutes = routes.find((route: RouteRecordRaw) => route.path === '/index')?.children || []

    // 过滤有权限的路由
    return mainRoutes.filter((route: RouteRecordRaw) => {
        // 如果路由没有meta或meta.hidden为true，则不显示
        if (!route.meta || route.meta.hidden === true) {
            return false
        }

        // 检查角色权限 (角色ID为1或2的管理员)
        const hasRole = !route.meta.roles ||
            (Array.isArray(route.meta.roles) && route.meta.roles.includes(userStore.userinfo.role))

        // 检查功能权限
        const hasPermission = !route.meta.permissions ||
            (Array.isArray(route.meta.permissions) && Array.isArray(userStore.userinfo.permissions) &&
                route.meta.permissions.some(permission =>
                    userStore.userinfo.permissions.includes(permission)
                ))

        // 同时满足角色和权限要求
        return hasRole && hasPermission
    })
})
</script>

<style scoped>
.example-container {
    padding: 20px;
}

.permission-section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.button-group {
    margin: 10px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sidebar-menu {
    width: 250px;
    border-right: solid 1px #e6e6e6;
    margin-top: 20px;
}

h3 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
    color: #303133;
    font-size: 16px;
}
</style>